<template>
  <div>
    <div class="interpret-container">
      <div class="interpret-header"><img src="https://fc-feed.cdn.bcebos.com/aix/aiAvatar.png"
                                         class="interpret-header-logo">
        <div>智能数据分析</div>
      </div>
      <div class="interpret-content">
        <div>暂无分析建议~</div>
      </div>
    </div>
    <div class="fcRightBox">
      <div class="fcHeader-container fcHeader-container-custom-dash">
        <div class="">
          <div class="contentHeader">

            <div style="width: 370px;display: flex;align-content: center;justify-content: space-between">
              <el-button class="buttonAdd" @click="btnXiu">新建计划</el-button>
              <el-input placeholder="请搜索单元" style="width: 200px" v-model="form.planName" @change="queryList">
                <i slot="suffix" class="el-input__icon el-icon-search"></i>
              </el-input>
              <el-button class="buttonBtn" @click="btnXiu">筛选</el-button>
            </div>
            <div style="min-width:600px;display: flex;align-content: center;justify-content: space-between">
              <button @click="btnXiu" style="width: 34px;height: 32px" type="button" name=""
                      class="one-button refresh-operation one-main one-button-normal one-button-medium"><span><div
                  class="one-loading-nested-loading one-loading-nested-loading-normal"><div
                  class="one-loading-container"><svg
                  xmlns="http://www.w3.org/2000/svg"
                  viewBox="0 0 24 24" min-width="14" height="14" class="dls-icon " focusable="false"><path
                  fill="currentColor"
                  d="M11.973 1C5.953 1 1.092 5.936 1.092 12h2c0-4.982 3.987-9 8.881-9 2.717 0 5.153 1.237 6.785 3.192l-.576.333a.5.5 0 0 0 .048.89l2.803 1.241a.5.5 0 0 0 .698-.391l.413-3.098a.5.5 0 0 0-.746-.499l-.887.512C18.521 2.638 15.438 1 11.973 1zm11.119 11c0 6.064-4.861 11-10.882 11-3.465 0-6.548-1.637-8.538-4.18l-.887.512a.5.5 0 0 1-.746-.5l.413-3.097a.5.5 0 0 1 .698-.391l2.804 1.24a.5.5 0 0 1 .047.89l-.576.334C7.057 19.764 9.493 21 12.21 21c4.894 0 8.882-4.018 8.882-9h2z"></path></svg></div></div></span>
              </button>
              <el-date-picker class="custom-date-picker" format="yyyy/MM/dd"
                  style="width: 70%; width:200px"
                  size="small"
                  @change="queryList"
                  v-model="timerArray"
                  value-format="yyyy-MM-dd"
                  :picker-options="pickerOptions"
                  :clearable="false"
                  range-separator="~"
                  type="daterange"
                  start-placeholder="开始日期"
                  end-placeholder="结束日期">
              </el-date-picker>
              <el-button class="buttonBtn" @click="btnXiu">自定义列</el-button>
              <el-button class="buttonBtn" @click="handleTabClick">重置列宽</el-button>
              <el-select style="width: 150px" v-model="value" placeholder="请选择" class="select-with-prefix1">
                <el-option
                    v-for="item in options2"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value">
                </el-option>
              </el-select>

            </div>

          </div>
          <el-table
              :data="tableList"
              style="width: 100%;background: #EBEDF5"
              :default-sort="{prop: 'date', order: 'descending'}"
          >
            <el-table-column fixed
                             type="selection"
                             min-width="55">
            </el-table-column>
            <el-table-column fixed
                             prop="projectName"
                             label="项目名称"
                             sortable
                             min-width="180">
            </el-table-column>

            <el-table-column
                prop="projectStutas"
                label="状态"
                sortable
                min-width="180">
            </el-table-column>
            <el-table-column
                prop="biddingMode"
                label="出价模式">

            </el-table-column>
            <el-table-column
                prop="marketingObjectives"
                label="项目营销目标"
                sortable
                min-width="180">
            </el-table-column>


            <el-table-column
                prop="deliveryMode"
                label="投放模式"
                sortable
                min-width="180">
            </el-table-column>
            <el-table-column
                prop="libraryType"
                label="产品库类型">
            </el-table-column>
            <el-table-column
                prop="conversionBid"
                label="目标转化出价"
                sortable
                min-width="180">
            </el-table-column>
            <el-table-column
                prop="conversionGuidanceBidding"
                label="目标转化指导出价"
                sortable
                min-width="180">
            </el-table-column>

            <el-table-column
                prop="deepConversionBidding"
                label="深度转化出价">
            </el-table-column>
            <el-table-column
                prop="deepConversionStatus"
                label="深度转化状态"
                sortable
                min-width="180">
            </el-table-column>
            <el-table-column
                prop="roiCoefficient"
                label="目标ROI系数"
                sortable
                min-width="180">
            </el-table-column>

            <el-table-column
                prop="effectiveScope"
                label="生效范围">
            </el-table-column>
            <el-table-column
                prop="convertingAssets"
                label="转化资产"
                sortable
                min-width="180">
            </el-table-column>
            <el-table-column
                prop="dataSources"
                label="数据来源"
                sortable
                min-width="180">
            </el-table-column>
            <el-table-column
                prop="deepConversionType"
                label="深度转化类型">
            </el-table-column>
            <el-table-column
                prop="convertingAssets"
                label="转化资产"
                sortable
                min-width="180">
            </el-table-column>
            <el-table-column
                prop="deepGuidancePrice"
                label="深度转化目标指导出价"
                sortable
                min-width="180">

            </el-table-column>
            <el-table-column
                prop="sharedBudget"
                label="共享预算"
                sortable
                min-width="180">
            </el-table-column>
            <el-table-column
                prop="toShow"
                label="展现"
                sortable
                min-width="180">
            </el-table-column>
            <el-table-column
                prop="click"
                label="点击"
                sortable
                min-width="180">
            </el-table-column>
            <el-table-column
                prop="consumption"
                label="消费">
            </el-table-column>
            <el-table-column
                prop="clickRate"
                label="点击率"
                min-width="180"
            >
              <template slot-scope="scope">
                {{ scope.row.clickRate }}%  </template>
            </el-table-column>
            <el-table-column
                prop="avgClickPrice"
                label="平均点击价格"
                sortable
                min-width="140">
            </el-table-column>

            <el-table-column
                prop="invalidFilteringAmount"
                label="无效转化过滤量"
                sortable
                min-width="140">
            </el-table-column>
            <el-table-column
                prop="targetConversionAmount"
                label="目标转化量"
                sortable
                min-width="140">
            </el-table-column>
            <el-table-column
                prop="targetConversionCost"
                label="目标转化成本"
                sortable
                min-width="140">
            </el-table-column>
            <el-table-column
                prop="targetConversionRate"
                label="目标转化率"
                sortable
                min-width="140">
            </el-table-column>
            <el-table-column
                prop="deepConversionRate"
                label="深度转化率"
                sortable
                min-width="140">
            </el-table-column>
            <el-table-column
                prop="promotionScenario"
                label="推广场景"
                sortable
                min-width="140">
            </el-table-column>
          </el-table>

        <div
              style="height: 80px;display: flex;align-items: center;justify-content: flex-end;width: 100%;margin-top: 10px;line-height: 80px">
            <div>
              <el-pagination background
                             style="min-width: 380px;height: 80px;ox-sizing: border-box;padding-top: 23px"
                             @size-change="handleSizeChange"
                             @current-change="handleCurrentChange"
                             :current-page="form.pageNum"
                             :page-size="form.pageSize"
                             :page-sizes="[10, 20, 30, 40, 50, 60, 70, 80, 90, 100]"
                             layout="sizes, prev, pager, next,jumper"
                             :total="form.total"
              ></el-pagination>
            </div>
            <div style="display: block">
              <el-button
                  style="display: block;margin-left: 0px; background: #ebedf5;border-color: #ebedf5;color: rgba(19, 22, 26, 0.9);"
                  type="primary" size="small" @click="queryList">确定
              </el-button>

            </div>

          </div>
        </div>

      </div>
    </div>

  </div>
</template>

<script>
import ItemMixins from "./item.mixins";
import * as echarts from 'echarts';
import {getOptimizationProjectList} from '@/services/model/managecenter'

export default {
  mixins: [ItemMixins],
  data() {
    return {


      isToggleStatus: false,

      chart: null,
      value: '下载',
      sumTypeList: [{
        value: '消费',
        label: '消费'
      }, {
        value: '展示',
        label: '展示'
      }, {
        value: '点击',
        label: '点击'
      }, {
        value: '平均点击价格',
        label: '平均点击价格'
      }],
      options2: [{
        value: '下载',
        label: '下载'
      }, {
        value: '发送邮箱',
        label: '发送邮箱'
      },
        {
          value: '下载设置',
          label: '下载设置'
        },],
      options: [{
        value: 0,
        label: '合计'
      }, {
        value: 1,
        label: '分时'
      }, {
        value: 2,
        label: '分日'
      }, {
        value: 3,
        label: '分周'
      }, {
        value: 4,
        label: '分月'
      }],
      isSelect: '账户整体',
      activeName: '整体走势',

    };
  },
  methods: {
    async queryList() {
      this.form.createTime = this.formatDate(this.timerArray[0]);
      this.form.updateTime = this.formatDate(this.timerArray[1]);

      let res = await getOptimizationProjectList(this.form)
       const modifiedArray = this.replaceNullWithDash( res.rows);
                this.tableList = modifiedArray|| []
       this.form.total = Math.ceil(Number(res.total) );
    },

    handleClick(tab, event) {
      console.log(tab, event);
    }
  },
  mounted() {
    this.queryList()
  },
};
</script>
<style>
</style>
<style scoped lang="less">

.fcRightBox {
  height: 100%;

  .fcHeader {
    background: #fff;
    border-radius: 6px;
    padding: 16px 24px 20px;
    margin-bottom: 24px;

    .fcHeader-title-container {

      position: relative;
      display: flex;
      flex-wrap: wrap;
      justify-content: space-between;
      align-items: center;

      .left-part {

        display: flex;
        flex-wrap: wrap;
        justify-content: flex-start;
        align-items: center;

        .title {
          font-size: 20px;
          color: #282c33;
        }

        .refresh-data-time {
          display: inline-block;
          margin-bottom: 4px;
        }

      }

      .right-part {
        display: flex;
        flex-wrap: wrap;
        justify-content: flex-start;
        align-items: center;

        .baidu-market-tip {
          color: #a8b0bf;
          font-size: 12px;

          .baidu-market-name {
            color: #0052cc;
          }
        }

        .fcHeader-date-pick-container {
          margin-left: 12px;
          display: flex;
          flex-wrap: wrap;
          justify-content: flex-start;
          align-items: center;

          /deep/ .el-checkbox {
            margin-left: 12px;
          }
        }
      }
    }
  }

  .fcHeader-container-custom-dash {
    border-top-right-radius: 0;
    border-top-left-radius: 0;
  }

  .fcHeader-container {
    position: relative;
    background-color: rgb(255, 255, 255);
    padding: 0px 24px 24px;
    border-radius: 6px;
    margin-bottom: 42px;

    .fcHeader-container-title-box {
      position: absolute;
      right: 24px;
      top: 20px;
      height: 28px;
      display: flex;
      align-items: center;

      .fcHeader-container-title-tip {
        font-size: 12px;
        color: #a8b0bf;
        z-index: 9;
      }
    }
  }

  .account-report-radio-container {
    width: calc(100% - 48px);
    display: flex;

    overflow: auto;

    .account-report-radio-card {
      min-width: 208px;
      padding: 12px 16px;
      border-radius: 6px;
      border: 1px solid #c4daff;
      background: #fff;
      margin-right: 16px;
      cursor: pointer;
      color: #545b66;
      font-size: 14px;
      font-weight: 400;
      line-height: 20px;

      .account-report-radio-card-base {
        display: flex;
        justify-content: space-between;
        align-items: center;

        .account-report-radio-card-base-cost {
          display: flex;
          align-items: center;
          color: #282c33;
          font-weight: 500;

          .account-report-radio-card-base-cost-num {
            font-size: 20px;
            line-height: 28px;
            margin: 0 4px;
          }
        }
      }
    }

    .account-report-radio-card-selected {
      border: 1px solid #0054e6;
      color: #0054e6;

      .account-report-radio-card-base-cost {
        color: #0054e6;
      }
    }

  }
}
</style>
<style scoped>
.dashboard .box-card {
  margin-bottom: 20px;
}

.dashboard .text-item {
  padding: 20px 0;
  text-align: center;
}

.dashboard .number {
  font-size: 24px;
  color: #333;
}

.dashboard .change {
  font-size: 14px;
  color: #333;
}

.dashboard .change el-icon {
  color: #67C23A;
}

.chart {
  width: 100%;
}

.contentHeader {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-bottom: 24px;
  padding-top: 24px;
  background-color: rgb(255, 255, 255);

.el-input__inner {
  height: 32px;
  line-height: 32px;
}

}
.contentHeader_right {
  min-width: 300px;
  display: flex;
  align-items: center;
  justify-content: space-between;

}

.buttonAdd {
  background: #0054e6;
  color: white;
  border-radius: 4px;
  font-size: 14px;
  padding: 0 16px;
  height: 32px;
}

.buttonBtn {
  background: #e2e6f0;
  border-radius: 4px;
  font-size: 14px;
  padding: 0 16px;
  height: 32px;
}

.refresh-operation {
  width: 32px;
  align-items: center;
}

.one-button-normal {
  background-color: #ebedf5;
  color: rgba(19, 22, 26, 0.9);
  border: 1px solid transparent;
}

.one-button-medium {
  font-size: 14px;
}

.interpret-container {
  width: 100%;
  border-radius: 6px;
  border: 2px solid #fff;
  box-sizing: border-box;
  padding: 30px;
  background-image: linear-gradient(to bottom right, #bfe8ff -50%, #fff 35%);
  background-color: #fff;
  background-repeat: no-repeat;
  margin-bottom: 8px;

}
.interpret-header {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  font-size: 16px;
  font-weight: bold;
}.interpret-container .interpret-header-logo {
   width: 21px;
   height: 21px;
   margin-right: 10px;
 }
.interpret-container .interpret-content {
  margin-top: 10px;
  border-radius: 10px;
  border-left: 2px solid #729cfe;
  background: #e5eeff;
  box-sizing: border-box;
  padding: 10px 30px;
}
.interpret-container .interpret-content > div::marker {
  color: #729cfe;
  unicode-bidi: isolate;
  font-variant-numeric: tabular-nums;
  text-transform: none;
  text-indent: 0px !important;
  text-align: start !important;
  text-align-last: start !important;
}


</style>
